<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getWorkOrderApi"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出数据</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="ts" name="workOrders">
import { ref, reactive } from "vue";
// import { ElMessageBox } from "element-plus";
// import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Download } from "@element-plus/icons-vue";
import { getWorkOrderApi } from "@/api/modules/workItem";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ departmentId: "1" });

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { prop: "base", label: "问题条线", _children: [{ prop: "条线类", label: "条线类", width: 90 }] },
  {
    prop: "base",
    label: "全年情况",
    _children: [
      { prop: "全年受理总量", label: "全年受理总量" },
      { prop: "全年累计解决量", label: "全年累计解决量" },
      { prop: "全年累计解决率", label: "全年累计解决率", width: 100 },
      { prop: "全年累计超时解决量", label: "全年累计超时解决量" },
      { prop: "全年累计超时解决率", label: "全年累计超时解决率" },
      { prop: "全年无法解决量", label: "全年无法解决量" },
      { prop: "全年无法解决率", label: "全年无法解决率" }
    ]
  },
  {
    prop: "base",
    label: "解决情况",
    _children: [
      { prop: "当日受理量", label: "当日受理量" },
      { prop: "当日解决量", label: "当日解决量" },
      { prop: "当月受理量", label: "当月受理量" },
      { prop: "当月解决量", label: "当月解决量" },
      { prop: "当月解决率", label: "当月解决率", width: 100 },
      { prop: "当月超时解决量", label: "当月超时解决量" },
      { prop: "当月超时解决率", label: "当月超时解决率" },
      { prop: "当月工单平均历时（天）", label: "当月工单平均历时（天）" },
      { prop: "当月满意度", label: "当月满意度" },
      { prop: "当月不满意工单量", label: "当月不满意工单量" }
    ]
  },
  {
    prop: "base",
    label: "在途情况",
    _children: [
      { prop: "在途工单量", label: "在途工单量" },
      { prop: "超时未出解决方案", label: "超时未出解决方案" },
      { prop: "未及时更新进度量", label: "未及时更新进度量" },
      { prop: "长历时在途工单", label: "长历时在途工单" },
      { prop: "未解决已超时", label: "未解决已超时" },
      { prop: "超时率", label: "超时率" },
      { prop: "当月无法解决工单", label: "当月无法解决工单" }
    ]
  },
  {
    prop: "base",
    label: "四大问题工单",
    _children: [
      { prop: "当月无法解决工单.1", label: "当月无法解决工单" },
      { prop: "超时工单", label: "超时工单" },
      { prop: "长历时工单", label: "长历时工单" },
      { prop: "当月不满意工单", label: "当月不满意工单" }
    ]
  }
]);

// 导出用户列表
const downloadFile = async () => {
  // ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
  //   useDownload(exportInfoApi, "数智员工运行情况", proTable.value?.searchParam)
  // );
};
</script>
